<template>
	<div class="doctor-card">
		<div class="doctor-detail">
			<ErrorImage :src="item.avatar" />
			<div class="dt_ms">
				<div class="dt_top fz15 flexcc">{{ item.person }}</div>
				<div class="d_mid flexcc fz12">{{ (item.createTime).substring(0,10) }}</div>
			</div>

			<div class="line_ask fz12 flexcc" @click="handleJump(item)">
				{{ buttonTextMap[item.status] }}
			</div>
		</div>
		<div class="doctor-skill fz12 flexcc">
			<div class="van-multi-ellipsis--l2">病情：{{ item.title }}</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import ErrorImage from '@/components/Error-Image'
export default {
	props: {
		item: {
			type: Object,
		},
		type: {
			type: String,
			default: '0',
		},
	},
	data() {
		return {
			voidIcon: require('@/assets/icon/wjx.png'),
			icon: require('@/assets/icon/wjx-active.png'),

			buttonTextMap: {
				0: '去处理',
				1: '查看详情',
			},
		}
	},

	methods: {
		handleJump(val) {
			// console.log(val)
			const id = this.isExpert ? val.id : val.expertId
			if (val.status === 0) {
				this.$router.push(`/service/${this.type}/${id}`)
			} else {
				// 跳往详情页面 service-detail
				this.$router.push(`/service-detail/${this.type}/${id}`)
			}
		},
	},
	computed: {
		...mapGetters(['isExpert']),
	},
	components: {
		ErrorImage,
	},
}
</script>

<style lang="scss" scoped>
.doctor-card {
	width: 100%;

	background-color: #f9f9f9;
	border-radius: 4px;

	padding: 12px 16px;
	
	.doctor-detail {
		display: flex;
		.d_avatar {
			width: 40px;
			height: 40px;
			background: rgba(0, 0, 0, 0);
			border: 1px solid #ffffff;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
			border-radius: 50%;

			margin-right: 12px;
		}

		.dt_ms {
			// display: flex;
			// align-items: ;
			flex: 1;
			.dt_top {
				height: 21px;

				color: #333333;
				margin-bottom: 3px;
			}
			.d_mid {
				height: 17px;
				color: #999999;
			}
		}
		.line_ask {
			padding: 2px 7px;

			border: 1px solid #ffffff;
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
			border-radius: 10px;
			color: #1681d8;
			height: 17px;
		}
	}
	.doctor-skill {
		color: #333333;
		margin-top: 8px;
	}
}
</style>
